---
layout: default
title: Fuzzy search plugin
---

    <h2>Fuzzy search plugin</h2>

    <p style="padding:20px; background-color:#ffdbdb; border:solid 1px #ffb8b8;">Note: The fuzzy search plugin is deprecated since v1.5.0, it's now <a href="{{ "/docs/fuzzysearch" | relative_url }}">bundled into</a> List.js.</p>

    <p>To use the plugin you first need to download it:</p>

    <h4>Via <a href="https://github.com/javve/list.fuzzysearch.js">GitHub</a></h4>
    <a href="https://raw.githubusercontent.com/javve/list.fuzzysearch.js/v0.1.0/dist/list.fuzzysearch.min.js" class="btn btn-primary">Download list.fuzzysearch.js</a>

    <h4>Via <a href="https://github.com/bower/bower">Bower</a></h4>
    <pre><code>bower install list.fuzzysearch.js</code></pre>

    <h4>Via <a href="https://cdnjs.com/">CDNJS</a></h4>
    <pre><code>&lt;script src="//cdnjs.cloudflare.com/ajax/libs/list.fuzzysearch.js/0.1.0/list.fuzzysearch.min.js">&lt;/script></code></pre>

    <h3>The difference between Fuzzy Search and List.js default search</h3>

    <p>The default search will conduct a time efficient search for an exact match in the content searched, while the fuzzy search will render results depending on if they are included anywhere in the content.</p>

<h3>Basic example</h3>
<pre><code>var items = [
    { character: "Guybrush Threepwood", game: "The Secret of Monkey Island" },
    { character: "Manny Calavera", game: "Grim Fandango" },
    { character: "Bernard Bernoulli", game: "Maniac Mansion" }
];

list.search('gu thre'); // return none
list.fuzzySearch.search('gu thre') // return 1 item
</code></pre>

<h3>Implementation</h3>
<pre><code>&lt;div id="list-id">
  &lt;input class="fuzzy-search" />
  &lt;ul class="list">
    / A bunch of items /
  &lt;/ul>
&lt;/div>

&lt;script>

var fuzzyOptions = {
  searchClass: "fuzzy-search",
  location: 0,
  distance: 100,
  threshold: 0.4,
    multiSearch: true
};
var options = {
  valueNames: [ 'name', 'category' ],
  plugins: [
    ListFuzzySearch(fuzzyOptions)
  ]
};

var listObj = new List('list-id', options);

// Search manually
listObj.fuzzySearch.search('my search');

// Search manually on specific columns
listObj.fuzzySearch.search('my search', { name: true });

&lt;/script>
</code></pre>



    <h3>Options</h3>
    <p>All options are optional. Simplest implementation is:</p>
    <pre><code class="javascript">plugins: [ ListFuzzySearch() ]</code></pre>
    <ul>
      <li>
        <strong>location</strong> <em class="docs-parameter-description">Int, default: 0</em><br/>
        Approximately where in the text is the pattern expected to be found?
      </li>
      <li>
        <strong>distance</strong> <em class="docs-parameter-description">Int, default: 100</em><br/>
        Determines how close the match must be to the fuzzy location (specified above). An exact letter match which is ‘distance’ characters away from the fuzzy location would score as a complete mismatch. A distance of 0 requires the match be at the exact location specified, a threshold of 1000 would require a perfect match to be within 800 characters of the fuzzy location to be found using a 0.8 threshold.
      </li>
      <li>
        <strong>threshold</strong> <em class="docs-parameter-description">Int, default: 0.4</em><br/>
        At what point does the match algorithm give up. A threshold of <code>0.0</code> requires a perfect match (of both letters and location), a threshold of <code>1.0</code> would match anything.
      </li>
      <li>
        <strong>multiSearch</strong> <em class="docs-parameter-description">Boolean, default: true</em><br/>
        Subtract arguments from the <code>searchString</code> or put <code>searchString</code> as only argument
      </li>
    </ul>

    <p>A big thanks to <a href="https://github.com/LuukvE">LuukvE</a> who made a <a href="https://github.com/LuukvE/list/commit/a75b6ef5649c5fb4232a40ef2f5191d0b57e1ede">commit</a> from which I could create this Fuzzy Search plugin.</p>

    <div class="continue">Next topic: <a href="{{ "/docs/plugins/build" | relative_url }}">Build your own plugin ›</a></div>
